<template>
    <div class="folder" :class="{'active' : folderId == folderValue.id,'show' : show }">
        <div class="folder-name" @click="selectFolder">
            <div class="icon" @click.stop="show = !show">
                <i class="el-icon-arrow-right"></i>
            </div>
            <div class="folder-title">{{folderValue.title + '( API ' + folderValue.apiList.length + ' ) '}}</div>
        </div>
        <el-collapse-transition>
            <div v-show="show">
                <div class="folder-list">
                    <folder v-for="item in folderValue.folderList" :key="item.id" :folderValue="item"></folder>
                </div>
                <div class="empty" v-if="!folderValue.folderList.length">(空)</div>
            </div>
        </el-collapse-transition>
    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        name: 'folder',
        props: ['folderValue'],
        data() {
            return {
                show: false,
            }
        },
        computed: {
            ...mapState("saveFolder", {
                folderId: state => state.folderId
            }),
        },
        methods: {
            selectFolder() {
                this.$store.dispatch('saveFolder/setFolderId', this.folderValue.id);
            },
        },
    }
</script>
<style>

</style>